<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="icon" type="image/png" sizes="16x16" th:href="@{backed/assets/images/favicon.png}">
  <title>Material Pro Admin Template - The Most Complete & Trusted Bootstrap 4 Admin Template</title>
  <!-- Bootstrap Core CSS -->
  <link th:href="@{backed/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
  <!-- Custom CSS -->
  <link th:href="@{backed/css/style.css}" rel="stylesheet">
  <!-- You can change the theme colors from here -->
  <link th:href="@{backed/css/colors/blue.css}" id="theme" rel="stylesheet">
  <link th:href="@{backed/assets/plugins/element-ui/index.css}" rel="stylesheet">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]-->
<!--  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>-->
<!--  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>-->


  <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
  <svg class="circular" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
  </svg>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper">
  <!-- ============================================================== -->
  <!-- Topbar header - style you can find in pages.scss -->
  <!-- ============================================================== -->
  <!--从commons.html中替换导航栏-->
  <div th:replace="~{commons/commons::topbar}"></div>
  <!-- ============================================================== -->
  <!-- End Topbar header -->
  <!-- ============================================================== -->
  <!-- ============================================================== -->
  <!-- Left Sidebar - style you can find in sidebar.scss  -->
  <!-- ============================================================== -->
  <!--        class="left-sidebar"-->
  <!-- 从commons.html中替换侧边栏 -->
  <div th:replace="~{commons/commons::sidebar}"></div>
  <!-- ============================================================== -->
  <!-- End Left Sidebar - style you can find in sidebar.scss  -->
  <!-- ============================================================== -->
  <!-- ============================================================== -->
  <!-- Page wrapper  -->
  <!-- ============================================================== -->
  <div class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">
      <!-- ============================================================== -->
      <!-- Bread crumb and right sidebar toggle -->
      <!-- ============================================================== -->
      <div class="row page-titles">
        <div class="col-md-5 col-8 align-self-center">
          <h3 class="text-themecolor m-b-0 m-t-0">个人中心</h3>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)" th:href="@{/index}">首页</a></li>
            <li class="breadcrumb-item active">个人中心</li>
          </ol>
        </div>
        <div class="col-md-7 col-4 align-self-center">
          <!--                        <a href="#" class="btn waves-effect waves-light btn-danger pull-right hidden-sm-down">Download Now</a>-->
        </div>
      </div>
      <!-- ============================================================== -->
      <!-- End Bread crumb and right sidebar toggle -->
      <!-- ============================================================== -->
      <!-- ============================================================== -->
      <!-- Start Page Content -->
      <!-- ============================================================== -->
      <!-- Row -->
      <div class="row" id="app">
        <!-- Column -->
        <div class="col-lg-4 col-xlg-3 col-md-5">
          <div class="card">
            <div class="card-block">
              <center class="m-t-30"><img th:src="@{backed/assets/images/users/5.jpg}" class="img-circle" width="150"/>
                <h4 class="card-title m-t-10">{{ userInfo.nickname }}</h4>
                <h6 class="card-subtitle">随心、如愿</h6>
                <div class="row text-center justify-content-md-center">
                  <div class="col-4"><a href="javascript:void(0)" class="link"><i class="icon-people"></i> <font
                      class="font-medium">254</font></a></div>
                  <div class="col-4"><a href="javascript:void(0)" class="link"><i class="icon-picture"></i> <font
                      class="font-medium">54</font></a></div>
                </div>
              </center>
            </div>
          </div>
        </div>
        <!-- Column -->
        <!-- Column -->
        <div class="col-lg-8 col-xlg-9 col-md-7">
          <div class="card">
            <div class="card-block">
              <form class="form-horizontal form-material">
                <div class="form-group">
                  <label class="col-md-12">昵称</label>
                  <div class="col-md-12">
                    <input type="text" placeholder="Johnathan Doe" v-model:value="userInfo.nickname"
                           class="form-control form-control-line">
                  </div>
                </div>
                <div class="form-group">
                  <label for="example-email" class="col-md-12">用户名</label>
                  <div class="col-md-12">
                    <input type="email" disabled v-model:value="userInfo.username"
                           class="form-control form-control-line"
                           name="example-email" id="example-email">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-12">密码</label>
                  <div class="col-md-12">
                    <input type="password" value="password" v-model:value="userInfo.password"
                           class="form-control form-control-line">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-12">电话</label>
                  <div class="col-md-12">
                    <input type="tel" placeholder="123 456 7890" v-model:value="userInfo.phone"
                           class="form-control form-control-line">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-12">邮箱</label>
                  <div class="col-md-12">
                    <input type="email" placeholder="email@qq.com" v-model:value="userInfo.email"
                           class="form-control form-control-line">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-12">个人描述</label>
                  <div class="col-md-12">
                    <textarea rows="1" class="form-control form-control-line" v-model:value="userInfo.info"></textarea>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-12">出生日期</label>
                  <div class="col-md-12">
                    <input type="date" v-model:value="userInfo.birthday"  class="form-control form-control-line">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-12">城市</label>
                  <div class="col-sm-12">
                    <select class="form-control form-control-line" v-model="userInfo.city">
                      <option>北京</option>
                      <option>上海</option>
                      <option>广州</option>
                      <option>深圳</option>
                      <option>杭州</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-12">
                    <input type="button" class="btn btn-success" @click="updateBtn" value="修改个人信息"/>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <!-- Column -->
      </div>

    </div>

    <!-- 从commons.html中替换底部栏 -->
    <div th:replace="~{commons/commons::footer}"></div>

  </div>

</div>


<script th:src="@{backed/assets/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script th:src="@{backed/assets/plugins/bootstrap/js/tether.min.js}"></script>
<script th:src="@{backed/assets/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script th:src="@{backed/js/jquery.slimscroll.js}"></script>
<!--Wave Effects -->
<script th:src="@{backed/js/waves.js}"></script>
<!--Menu sidebar -->
<script th:src="@{backed/js/sidebarmenu.js}"></script>
<!--stickey kit -->
<script th:src="@{backed/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js}"></script>
<!--Custom JavaScript -->
<script th:src="@{backed/js/custom.min.js}"></script>
<script th:src="@{backed/js/vue.js}"></script>
<script th:src="@{login/js/commons_js/commons.js}"></script>
<script th:src="@{login/js/UserInfo_API/UserInfo.js}"></script>
<script th:src="@{backed/assets/plugins/element-ui/index.js}"></script>
<script th:replace="~{commons/commons::topbar_vue}" ></script>
<script type="application/javascript" >

  const vm = new Vue({
    el: "#app",
    data: {
      userInfo: {
        nickname: "",
        username: "",
        password: "",
        phone: "",
        email:"",
        info: "",
        birthday: "",
        city: "",
        avatar: ""
      }
    },
    mounted: function () {
       this.getInfo();
    },
    methods: {

      getInfo() {
        let that = this;
        infoApi(window.sessionStorage.getItem("username")).done(function (res) {
          //渲染数据
          if (res.code === 200) {
            console.log("成功回显");
            console.log(res.data.nickname)
            that.userInfo.nickname = res.data.nickname;
            that.userInfo.username = res.data.username;
            that.userInfo.password = res.data.password;
            that.userInfo.phone = res.data.phone;
            that.userInfo.email = res.data.email;
            that.userInfo.info = res.data.info;
            that.userInfo.birthday = res.data.birthday;
            that.userInfo.city = res.data.city;
          } else {
            that.$message({
              message: '网络异常',
              type: 'warning',
              center:true
            });
          }
        })
      },
      updateBtn() {
        let that=this;
        console.log(that.userInfo.birthday)
        updateInfoApi(that.userInfo).done(function (res) {
          if (res.code === 200) {
            that.$message({
              message: '个人信息，修改成功！',
              type: 'success',
              center:true
            });
            //重新渲染数据
            // that.$forceUpdate()
          } else {
            that.$message({
              message: '网络异常',
              type: 'warning',
              center:true
            });
          }
        })
      }
    },
  })

</script>
</body>

</html>
<script setup lang="ts">
</script>